<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表格顶部的区域 -->
        <el-row :gutter="20">
          <el-col :span="5" :offset="0">
            <el-form label-width="80px" size="mini" class="form">
              <el-form-item label="学科名称">
                <el-input v-model="input"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="5">
            <el-button size="mini" @click="clear">清除</el-button>
            <el-button type="primary" size="mini" @click="search">搜索</el-button>
          </el-col>
          <el-col :span="2" :offset="11">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              @click="showAdd = true"
              >新增学科</el-button
            >
          </el-col>
        </el-row>

        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>
        <!-- 标签表格 -->
        <el-table
          :data="list"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }"
        >
          <el-table-column class="buttom" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              {{ formatTime(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template slot-scope="scope">
              {{ isShow(scope.row.isFrontDisplay) }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column width="220px" label="操作">
            <template slot-scope="scope">
              <el-button
              type="text"
              size="mini"
              @click="$router.push(`/subjects/directorys??id=${scope.row.id}&name=${scope.row.subjectName}`)"
              >学科分类</el-button>
              <el-button
              type="text"
              size="mini"
               @click="$router.push(`/subjects/tags/?id=${scope.row.id}&name=${scope.row.subjectName}`)"
              >学科标签</el-button>
              <el-button type="text" size="mini" @click="edit(scope.row)"
                >修改</el-button
              >
              <el-button type="text" size="mini" @click="delSub(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" class="top" justify="end" style="height: 50px">
          <el-pagination
          background
            layout="prev,pager,next,sizes,jumper"
            :page-sizes="[10,5]"
            :total="counts"
            :page-size="params.pagesize"
            @current-change='changePage'
            @size-change='changeSize'
          />
        </el-row>
      </el-card>
    </div>
    <add-sub
      ref="edit"
      :showAdd="showAdd"
      @closeSub="showAdd = false"
      :subId="subId"
    ></add-sub>
  </div>
</template>

<script>
// 添加删除的api
import { list, remove } from '@/api/hmmm/subjects.js'
// 添加修改弹出层
import AddSub from '../components/subjects-add.vue'
// 显示隐藏文字处理
import dir from '../../api/base/baseApi'
// 时间处理
import dayjs from 'dayjs'
export default {
  components: {
    AddSub
  },
  data () {
    return {
      list: [], // 接口数据
      showAdd: false, // 弹层的打开状态
      params: {
        page: 1, // 页数
        pages: 1,
        pagesize: 10 // 页尺寸
      },
      counts: 0, // 总的条目数
      subId: 0,
      input: '',
      show: true
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const res = await list(this.params)
      console.log(res)
      this.list = res.data.items// 页面渲染完成
      this.params.pages = res.data.pages
      this.params.page = res.data.page
      this.params.pagesize = Number(res.data.pagesize)// 数据传输过来的时候,需要转成数值类型的数据
      this.counts = res.data.counts
    },
    changePage (val) {
      this.params.page = val
      this.getList()
    },
    changeSize (val) {
      this.params.pagesize = val
      this.getList()
    },
    edit (row) {
      this.subId = row
      console.log(this.subId)
      this.showAdd = true
      this.$refs.edit.getSub(row)
    },
    formatTime (a) {
      return dayjs(a).format('YYYY-MM-DD')
    },
    isShow (type) {
      const maps = {}
      dir.isShowSub.forEach((item) => {
        maps[item.id] = item.value
      })
      return maps[type]
    },
    clear () {
      this.input = ''
      this.getList()
    },
    search () {
      if (this.input === '') {
        this.getList()
      } else {
        this.list = this.list.filter((item) => {
          return item.subjectName === this.input
        })
      }
    },
    // 删除操作
    delSub (id) {
      this.$confirm('确定删除吗？', '提示').then(async () => {
        await remove(id)
        this.$message.success('删除成功')
        if (this.params.page > Math.ceil((this.counts - 1) / this.params.pagesize)) {
          this.params.page = Math.ceil((this.counts - 1) / this.params.pagesize)
        }
        this.getList()
      }).catch(() => {
        console.log('取消了删除')
      })
    }
  }
}
</script>

<style scoped>
.form {
  display: flex;
  flex-direction: row;
}
.top{
  top:12px
}
</style>
